.latest-data-insights {
    position: relative;
    margin-bottom: 24px;

    @include md-down {
        margin-bottom: 48px;
    }
}

.latest-data-insights__viewport {
    overflow: hidden;
    // Let box-shadow of the focused card overflow the container. It would
    // happen by default with the initial value of `overflow`, which is
    // `visible`, but we need it to be `hidden` for the carousel. We exclude
    // the right side to keep the content clipped correctly.
    padding: 24px 0 24px 24px;
    margin: -24px 0 -24px -24px;
}

html:not(.js-enabled) .latest-data-insights__viewport {
    overflow: auto;
}

.latest-data-insights__card-container {
    display: flex;
    gap: var(--grid-gap);
    scrollbar-width: thin;
}

.latest-data-insights__card {
    height: 322px;
    transition:
        opacity 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out;
    opacity: 0.6;

    @include md-down {
        flex: 0 0 91%;
        max-width: 330px;
        height: 538px;
    }
}

html:not(.js-enabled) .latest-data-insights__card,
.latest-data-insights__card.is-snapped {
    opacity: 1;
}

.latest-data-insights__card__data-insight {
    display: flex;
    gap: 16px 24px;
    flex: 0 0 845px;
    color: $blue-90;
    background: $blue-20;
    padding: 16px;

    .article-block__text {
        @include body-3-medium;
    }

    .article-block__cta {
        color: $blue-90;
    }

    &:hover {
        background: $accent-pale-blue;

        .latest-data-insights__card-body:before {
            background: linear-gradient(
                180deg,
                rgba(231, 242, 255, 0) 50%,
                #e7f2ff 100%
            );
        }
    }

    @include md-down {
        flex-direction: column;
    }
}

.latest-data-insights__card__data-insight.is-snapped {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
}

.latest-data-insights__card__see-all {
    padding: 257px 0;
}

// Sizing flex child picture elements is finnicky on Safari.
// Make sure you test all 3 browsers if you're making changes here.
.latest-data-insights__card-left {
    display: flex;
    height: 100%;

    picture {
        height: 100%;

        @include md-down {
            max-height: 360px;
            overflow-y: auto;
        }
    }

    img {
        height: 100%;
        width: auto;
        max-width: initial;

        @include md-down {
            height: auto;
            max-width: 100%;
        }
    }
}

.latest-data-insights__card-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.latest-data-insights__card-body {
    position: relative;
    overflow: hidden;

    &:before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(
            180deg,
            rgba(219, 229, 240, 0) 50%,
            $blue-20 100%
        );
    }
}

.latest-data-insights__card-continue {
    @include body-3-medium;

    @include md-down {
        display: none;
    }
}

.latest-data-insights__card-dateline {
    @include h5-black-caps;

    @include md-down {
        @include h6-black-caps;
    }
}

.latest-data-insights__card-date {
    margin-left: 8px;

    @include md-down {
        margin-left: 6px;
    }
}

.latest-data-insights__card .latest-data-insights__card-title {
    margin: 0 0 8px 0;

    @include subtitle-2-bold;

    @include md-down {
        font-size: 18px;
    }
}

.latest-data-insights__control-button {
    --button-size: 40px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: calc(50% - (var(--button-size) / 2));
    z-index: 1;
    width: var(--button-size);
    height: var(--button-size);
    padding: 0;
    border-radius: 50%;

    &--prev {
        left: 8px;

        @include xlg-up {
            left: -60px;
        }
    }

    &--next {
        right: 8px;

        @include xlg-up {
            right: -60px;
        }
    }

    @include md-down {
        display: none;
    }
}

.latest-data-insights__dots {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 12px;
    bottom: -26px;
    z-index: 1;
    width: 100%;

    @include md-up {
        display: none;
    }
}

.latest-data-insights__dot {
    background-color: $blue-30;
    display: inline-flex;
    text-decoration: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: 8px;
    height: 8px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;

    &--selected {
        background-color: $blue-65;
        width: 12px;
        height: 12px;
    }
}
